<template>
  <div v-for="item in list" :key="item.doc_id" class="wrap">
    <div class="cover">
      <cover-image  
        class="cover-img"                           
        :src="item.pictures[0].img_src"
        size="@352w_352h_1c"
        @click="handlePreview(item.pictures)"
      >
        <span v-if="item.count > 1" class="pics">{{item.count}}p</span>
      </cover-image>
    </div>
    <div class="content">
        <span class="title">{{ item.description }}</span>
        <div class="count">
            <span><i class="fa fa-view"></i>{{ formatNumber(item.view) }}</span>
            <span><i class="fa fa-comment"></i>{{ formatNumber(item.comment) }}</span>
        </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import { ImagePreview } from 'vant'
import CoverImage from '@/components/CoverImage'
import { spaceApi } from '@/api'
import { formatNumber } from '@/utils'
export default {
  name: 'SpacePhotos',
  components: {
    CoverImage
  },
  props: {
    mid: {
      type: [Number, String]
    }
  },
  setup(props) {
    const params = reactive({
      list: []
    })

    const getData = async () => {
      try {
        const { data } = await spaceApi.getUserPhotos({
          uid: props.mid
        })
        if (data) {
          params.list = data.items         
        }
      } catch (error) {   
        console.log(error)        
      }
    }

    const handlePreview = (pictures) => {
      const images = pictures.map(item => item.img_src)
      ImagePreview({
        images,
        closeable: true
      })
    }

    watch(() => props.mid, () => {
      params.list.splice(0, params.list.length)
      getData()
    }, {
      immediate: true
    })

    return {
      ...toRefs(params),
      handlePreview,
      formatNumber
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    display: flex;
    padding: 8px 5px;
}
.cover {
    width: 88px;
    &-img {
        padding-bottom: 100%;
    }
    .pics {
        position: absolute;
        right: 4px;
        bottom: 4px;
        color: $color-white;
        font-size: 12px;
        padding: {
            left: 2px;
            right: 2px;
        };
        background-color: rgba(0,0,0,.5);          
    }
}
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    font-size: 12px;
    color: $color-text-secondary;
}
.title {
    @include max-lines(2);
    word-break: break-all;
    font-size: 13px;
    margin-bottom: 8px;
}

.count {
    display: flex;
    align-items: center;
    span:first-child {
        margin-right: 10px;
    }
    .fa{
        margin-right: 5px;
        vertical-align: middle;
    }
}
</style>